<template>
    <div>
        <h3>房号列表</h3>
        <input type="button" value="添加" @click="add">
        <input type="file" @change="importfn">
        <input type="button" value="导入" @click="abc">
        <input type="button" value="导出" @click="execl">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房号名称</td>
                    <td>门店名称</td>
                    <td>房型图片</td>
                    <td>房型</td>
                    <td>价格</td>
                    <td>操作</td>

                </tr>
                <tr v-for="item in data.list">
                    <td>{{ item.HouseName }}</td>
                    <td>{{ item.ShopName }}</td>
                    <td><img :src="item.Photo" width="100" /></td>
                    <td>{{ item.HouseTypeName }}</td>
                    <td>{{item.Price}}</td>
                    <td>
                    </td>

                </tr>
            </tbody>
        </table>
        <div>
            每页显示<select v-model="a.pageHang" @change="show">
                <option :value="item" v-for="item in arr" :key="item">{{item}}</option>
            </select>条
            <input type="button" value="首页" @click="goPage(1)" />
            <input type="button" value="上一页" @click="goPage(a.pageYe - 1)" />
            <span v-for="item in data.zongYe" @click="goPage(item)">{{ item }}</span>
            <input type="button" value="下一页" @click="goPage(a.pageYe + 1)" />
            <input type="button" value="尾页" @click="goPage(data.zongYe)" />
            <input type="number" v-model="a.pageYe" />
            <input type="button" value="跳转" @click="goPage(a.pageYe)">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
import moment from 'moment';
const router = useRouter();
const route = useRoute();

onMounted(() => {
    show();
})
const add: any = () => {
    router.push("/housenumberadd")
}

let obj=ref();
//选择文件
const importfn:any=(e:any)=>{
    obj.value=e.target.files[0]
}
//导入
const abc:any=()=>{
    //转成formdata 发送网络请求
    if(obj.value==null)
    {
        alert('没选文件');
        return;
    }
    let f=new FormData();
    f.append('file',obj.value);
    axios({
        url:'/api/HouseNumber/ImportExcel',
        method:'post',
        data:f
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0){
            alert("导入成功");
            show();
        }
        else{
            alert("导入失败");
            return;
        }


    })
}

const execl:any=()=>{
   location.href=`https://localhost:7035/api/HouseNumber/ExportExcel?pageYe=${a.pageYe}&pageHang=${a.pageHang}&name=${a.name}`;
}

let arr=ref([1,2,3,4])

let a: any = reactive({
    pageYe: 1,
    pageHang: 2,
    name: ''
})

let data: any = reactive({
    list: [],
    zongHang: '',
    zongYe: ''
})

const goPage = (num: any) => {
    if (num < 1) {
        a.pageYe == 1;
        return;
    }
    if (num > data.zongYe) {
        a.pageYe == data.zongYe;
        return;
    }
    a.pageYe = num;
    show();
}

const show = () => {
    axios({
        url: '/api/HouseNumber/GetHouseNoList',
        method: 'get',
        params: a
    })
        .then((res) => {
            console.log(res);
            data.list = res.data.list
            data.zongHang = res.data.zongHang
            data.zongYe = res.data.zongYe
        })
}



</script>

<style scoped>
span{
    margin: 0 10px;
}

a{
    margin: 0 10px;
}
input{
    margin: 0 5px;
}
</style>